<script setup>
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { getTopRatedMovies,getMovieOnInfoList } from '../api/api'
import movieItem from "../components/movie-item.vue"
import loading from "../components/loading.vue"

const router = useRouter()
// let cities = ref()
const topRatedMovies = ref('')
const movieList = ref()

const getHotMovies = async () =>{
        let res = await getTopRatedMovies()
        topRatedMovies.value = res
}

const getMovieList = async ()=>{
    let res = await getMovieOnInfoList();
    // console.log(res);
    movieList.value = res.movieList
}

const goMovieDetail = (mid) => {
    router.push({
        name:'movieDetail',
        params: {
            id: mid, 
        }
    })
}

onMounted(() => {
  getHotMovies()
  getMovieList()

})
</script>

<template>
    <div class="body">
            <div class="scroll">
            <p class="title">{{ topRatedMovies?.title }}</p>
            <div class="movies-wrapper">
                <loading v-if="!topRatedMovies?.movieList"></loading>
                <ul class="movies">
                    <li class="movies-item" v-for="el in topRatedMovies?.movieList" :key="el.movieId" @click="goMovieDetail(el.movieId)">
                        <div class="poster">
                            <img :src="el.poster" alt="">
                            <div class="mask"></div>
                            <span class="score">观众评分 {{ el.score }}</span>
                        </div>
                        <p class="movie-name">{{ el.name }}</p>
                    </li>
                </ul>
            </div>
            
        </div>
        <div class="list-wrapper">
            <loading v-if="!movieList"></loading>
            <ul class="list">
                <movieItem v-for="el in movieList" :key="el.id" :info="el"></movieItem>
            </ul>
        </div>
    </div>
    
</template>

<style lang="scss" scoped>
.body{
    background-color: #f4f4f4;
    margin-bottom: 50px;
}
.scroll{
    width: 100%;
    margin-bottom: 10px;
    background-color: #fff;
    .title{
        font-size: 14px;
        color: #333;
        margin: 10px;
    }
    .movies-wrapper{
        max-height: 155px;
        overflow: hidden;
        margin: 10px;
    }
    .movies{
        display: flex;
        max-width: 100%;
        overflow: auto;
        padding-bottom: 10px;
        .movies-item{
            margin-right: 10px;
            .poster{
                position: relative;
                img{
                    width: 85px;
                    height: 115px;
                    position: relative;
                }
                .mask{
                    position: absolute;
                    width: 85px;
                    height: 35px;
                    bottom: 0;
                    background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000);
                }
                .score{
                    position: absolute;
                    bottom: 4px;
                    left: 6px;
                    font-weight: 600;
                    color: #faaf00;
                    font-size: 11px;
                }
            }
            .movie-name{
                font-size: 13px;
                font-weight: bold;
                color: #222;
                margin: 5px 0 3px;
            }
        }
    }
}
.list-wrapper{
    background-color: #fff;
    .list{
        display: flex;
        flex-direction: column;
    }
}
</style>